<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Admin Dashboard - Home</title>
<meta name="description" content="">
<meta name="author" content="templatemo">
<!-- 
    Visual Admin Template
    https://templatemo.com/tm-455-visual-admin
    -->
<link
	href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700'
	rel='stylesheet' type='text/css'>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/templatemo-style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
	<!-- Left column -->
	<div class="templatemo-flex-row">
		<div class="templatemo-sidebar">
			<header class="templatemo-site-header">
				<div class="square"></div>
				<h1>Visual Admin</h1>
			</header>
			<div class="profile-photo-container">
				<img src="images/profile-photo.jpg" alt="Profile Photo"
					class="img-responsive">
				<div class="profile-photo-overlay"></div>
			</div>
			<!-- Search box -->

			<div class="mobile-menu-icon">
				<i class="fa fa-bars"></i>
			</div>
			<nav class="templatemo-left-nav">
				<ul>
					<li><a href="index.html" class="active"><i
							class="fa fa-home fa-fw"></i>主页</a></li>
					<li><a href="Memorize_words.html"><i
							class="fa fa-bar-chart fa-fw"></i>背单词</a></li>
					<li><a href="Ranking.html"><i class="fa fa-database fa-fw"></i>排行榜</a></li>
					<li><a href="words.html"><i class="fa fa-map-marker fa-fw"></i>words</a></li>
					<li><a href="records.html"><i class="fa fa-users fa-fw"></i>单词记录</a></li>
					<li><a href="Test.html"><i
							class="fa 	fa fa-align-justify fa-fw"></i>单词复习</a></li>
					<li><a href="myinfo.html"><i class="fa fa-bar-chart fa-fw"></i>个人信息</a></li>
					<li><a href="setting.html"><i class="fa fa-sliders fa-fw"></i>设置</a></li>
					<li><a href="../login&regist.html"><i
							class="fa fa-eject fa-fw"></i>注销</a></li>
				</ul>
			</nav>
		</div>


		<form class="templatemo-search-form search_" role="search">
			<h1 class="t">566 百词斩 主页</h1>
			<div class="input-group top1">
				<button type="submit" class="fa fa-search"></button>
				<input type="text" class="form-control" placeholder="Search"
					name="srch-term" id="srch-term">
				<div class="suggestion-list.hidden" id="sulist"></div>
			</div>


			<div class="templatemo-content-widget orange-bg indexwordhidden"
				id="rest">
				<div class="media" id="words">
					<div class="media-body">
						<h2 class="media-heading text-uppercase">等待加载...</h2>
						<p>
							等待加载...</br> 等待加载...</br> 等待加载...</br> 等待加载...</br> 等待加载...</br> 等待加载...</br> 等待加载...</br>
						</p>
					</div>
				</div>
			</div>



		</form>




	</div>

	<!-- JS -->
	<script src="js/jquery-1.11.2.min.js"></script>
	<!-- jQuery -->
	<script src="js/jquery-migrate-1.2.1.min.js"></script>
	<!--  jQuery Migrate Plugin -->
	<!-- <script src="https://www.google.com/jsapi"></script>  Google Chart -->
	<script src="js/jquery.cookie.js"></script>
	<script>
    	if(typeof($.cookie("email"))  == "undefined"){
    		 alert("请先登录");
    		 window.location.href="../login&regist.html";
    	}
    </script>
	<script>
    	
      var words; 
      function showword(res){
//  	  	alert(res.innerHTML);
    	  	$("#rest").removeClass("indexwordhidden").addClass("indexword");

    			  var wordshtml = "";
    			  wordshtml = "";
    			  words.forEach(function(currentValue){
    			  	console.log(currentValue["media-body"]+" == ?  "+res.innerHTML+"    ");
    			  	if(currentValue["word"] == res.innerHTML){
    			  		wordshtml = wordshtml + "<div class=\"media-body\">";
  	  			 		wordshtml = wordshtml + "<h2 class=\"media-heading text-uppercase\">"+currentValue["word"]+"</h2>";
    				 		wordshtml = wordshtml + "<p>  音标    : </br> "+currentValue["accent"]+"</p>";
    				 		wordshtml = wordshtml + "<p>  词根    : </br> "+currentValue["word_etyma"]+"</p>";
    				 		wordshtml = wordshtml + "<p>中文翻译  : </br> "+currentValue["mean_cn"]+"</p>";
    				 		wordshtml = wordshtml + "<p>英文翻译  : </br> "+currentValue["mean_en"]+"</p>";
    			 			wordshtml = wordshtml + "<p> 例句       : </br> "+currentValue["sentence"]+"</p>";
   	 				 		wordshtml = wordshtml + "<p>例句翻译  : </br> "+currentValue["sentence_trans"]+"</p>";
    				 		wordshtml = wordshtml + "<div>";
    			  	}
    			 		
    			   });
    			 
    			$("#words").html(wordshtml);
    	  	$("#sulist").html("");
		  		$("#sulist").removeClass("suggestion-list").addClass("suggestion-list.hidden");
		  		
		  
      };
      $("#srch-term").on('input',function(){      	
      	$("#rest").removeClass("indexword").addClass("indexwordhidden");
      	$.ajax({
      		type:"post",
      		url:"../getwords",
      		async:true,
      		data:"word="+$("#srch-term").val(),
      		success:function(res){
      			
      			words = JSON.parse(res);
      			var s="";
      			for(var i=0;i<words.length;i++){
      				s+="<div class=\"resault\" onclick=\"showword(this);\">"+words[i]["word"]+"</div>";
      			}
      			
      			if(words.length!=0){
      				$("#sulist").html(s);
          		$("#sulist").removeClass("suggestion-list.hidden").addClass("suggestion-list");
          			
      			}else{
      				$("#sulist").html("");
          			$("#sulist").removeClass("suggestion-list").addClass("suggestion-list.hidden");
      			}
      			
      		}
      	});
      	
      });
      
    </script>
	<script type="text/javascript" src="js/templatemo-script.js"></script>
	<!-- Templatemo Script -->

</body>
</html>